<script setup>
import { ref } from 'vue'

// 测试状态
const testState = ref({
  step: 1,
  isPlaying: false,
  volume: 50,
  frequency: 1000,
  balance: 0
})

// 测试项目
const testItems = ref([
  {
    id: 1,
    title: '音量校准',
    desc: '调整合适的音量大小',
    completed: false
  },
  {
    id: 2,
    title: '频率响应',
    desc: '测试不同频率的声音表现',
    completed: false
  },
  {
    id: 3,
    title: '声道平衡',
    desc: '调整左右声道的平衡',
    completed: false
  },
  {
    id: 4,
    title: '音质评估',
    desc: '综合评估音频质量',
    completed: false
  }
])

// 测试结果
const testResults = ref({
  volumeLevel: null,
  frequencyResponse: null,
  channelBalance: null,
  overallQuality: null
})

// 播放测试音频
const playTestSound = () => {
  testState.value.isPlaying = !testState.value.isPlaying
  // 实现音频播放逻辑
}

// 调整音量
const updateVolume = (value) => {
  testState.value.volume = value
  // 实现音量调节逻辑
}

// 调整频率
const updateFrequency = (value) => {
  testState.value.frequency = value
  // 实现频率调节逻辑
}

// 调整平衡
const updateBalance = (value) => {
  testState.value.balance = value
  // 实现平衡调节逻辑
}

// 下一步
const nextStep = () => {
  if (testState.value.step < 4) {
    testState.value.step++
    testItems.value[testState.value.step - 2].completed = true
  }
}

// 完成测试
const completeTest = () => {
  testResults.value = {
    volumeLevel: '适中',
    frequencyResponse: '良好',
    channelBalance: '均衡',
    overallQuality: '优秀'
  }
  testItems.value[3].completed = true
}
</script>

<template>
  <div class="test-page">
    <!-- 测试进度 -->
    <div class="progress-bar">
      <div 
        v-for="item in testItems"
        :key="item.id"
        class="progress-step"
        :class="{ 
          active: item.id === testState.step,
          completed: item.completed
        }"
      >
        <div class="step-number">{{ item.id }}</div>
        <div class="step-info">
          <div class="step-title">{{ item.title }}</div>
          <div class="step-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 测试区域 -->
    <div class="test-section">
      <!-- 音量校准 -->
      <div 
        v-if="testState.step === 1"
        class="test-content"
      >
        <h2>音量校准</h2>
        <p class="test-desc">
          请调整音量滑块，直到听到舒适的音量水平
        </p>
        <div class="volume-control">
          <span class="control-label">音量</span>
          <input
            v-model="testState.volume"
            type="range"
            min="0"
            max="100"
            class="slider"
            @input="updateVolume($event.target.value)"
          >
          <span class="value-label">{{ testState.volume }}%</span>
        </div>
        <button 
          class="play-btn"
          :class="{ playing: testState.isPlaying }"
          @click="playTestSound"
        >
          {{ testState.isPlaying ? '停止' : '播放测试音频' }}
        </button>
        <button 
          class="next-btn"
          @click="nextStep"
        >
          下一步
        </button>
      </div>

      <!-- 频率响应 -->
      <div 
        v-else-if="testState.step === 2"
        class="test-content"
      >
        <h2>频率响应</h2>
        <p class="test-desc">
          请聆听不同频率的声音，确保声音清晰无失真
        </p>
        <div class="frequency-control">
          <span class="control-label">频率</span>
          <input
            v-model="testState.frequency"
            type="range"
            min="20"
            max="20000"
            step="100"
            class="slider"
            @input="updateFrequency($event.target.value)"
          >
          <span class="value-label">{{ testState.frequency }}Hz</span>
        </div>
        <div class="frequency-presets">
          <button 
            v-for="freq in [100, 1000, 10000]"
            :key="freq"
            class="preset-btn"
            @click="testState.frequency = freq"
          >
            {{ freq }}Hz
          </button>
        </div>
        <button 
          class="play-btn"
          :class="{ playing: testState.isPlaying }"
          @click="playTestSound"
        >
          {{ testState.isPlaying ? '停止' : '播放测试音频' }}
        </button>
        <button 
          class="next-btn"
          @click="nextStep"
        >
          下一步
        </button>
      </div>

      <!-- 声道平衡 -->
      <div 
        v-else-if="testState.step === 3"
        class="test-content"
      >
        <h2>声道平衡</h2>
        <p class="test-desc">
          调整左右声道的平衡，使声音分布均匀
        </p>
        <div class="balance-control">
          <span class="side-label">左</span>
          <input
            v-model="testState.balance"
            type="range"
            min="-100"
            max="100"
            class="slider"
            @input="updateBalance($event.target.value)"
          >
          <span class="side-label">右</span>
        </div>
        <div class="balance-value">
          {{ testState.balance < 0 ? '左' : testState.balance > 0 ? '右' : '中' }}
          {{ Math.abs(testState.balance) }}%
        </div>
        <button 
          class="play-btn"
          :class="{ playing: testState.isPlaying }"
          @click="playTestSound"
        >
          {{ testState.isPlaying ? '停止' : '播放测试音频' }}
        </button>
        <button 
          class="next-btn"
          @click="nextStep"
        >
          下一步
        </button>
      </div>

      <!-- 音质评估 -->
      <div 
        v-else
        class="test-content"
      >
        <template v-if="!testResults.overallQuality">
          <h2>音质评估</h2>
          <p class="test-desc">
            播放示例音频，评估整体音质表现
          </p>
          <div class="quality-options">
            <button 
              class="play-btn"
              :class="{ playing: testState.isPlaying }"
              @click="playTestSound"
            >
              {{ testState.isPlaying ? '停止' : '播放示例音频' }}
            </button>
            <button 
              class="complete-btn"
              @click="completeTest"
            >
              完成测试
            </button>
          </div>
        </template>
        <template v-else>
          <h2>测试结果</h2>
          <div class="results-grid">
            <div class="result-item">
              <div class="result-label">音量水平</div>
              <div class="result-value">{{ testResults.volumeLevel }}</div>
            </div>
            <div class="result-item">
              <div class="result-label">频率响应</div>
              <div class="result-value">{{ testResults.frequencyResponse }}</div>
            </div>
            <div class="result-item">
              <div class="result-label">声道平衡</div>
              <div class="result-value">{{ testResults.channelBalance }}</div>
            </div>
            <div class="result-item">
              <div class="result-label">整体音质</div>
              <div class="result-value highlight">
                {{ testResults.overallQuality }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.test-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* 进度条样式 */
.progress-bar {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 2rem;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
  flex: 1;
}

.step-number {
  width: 48px;
  height: 48px;
  background-color: var(--bg-light);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s ease;
}

.progress-step.active .step-number {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.progress-step.completed .step-number {
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.step-info {
  text-align: center;
  max-width: 150px;
}

.step-title {
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.step-desc {
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 测试区域样式 */
.test-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
}

.test-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.test-content h2 {
  margin: 0;
}

.test-desc {
  color: var(--text-gray);
  text-align: center;
  max-width: 600px;
}

/* 控制器样式 */
.volume-control,
.frequency-control,
.balance-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 500px;
}

.control-label,
.side-label,
.value-label {
  color: var(--text-gray);
  min-width: 60px;
}

.slider {
  flex: 1;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
}

.frequency-presets {
  display: flex;
  gap: 1rem;
}

.preset-btn {
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-gray);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.preset-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.balance-value {
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 按钮样式 */
.play-btn,
.next-btn,
.complete-btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-btn {
  background-color: var(--primary-color);
  color: white;
}

.play-btn.playing {
  background-color: var(--error-color);
}

.next-btn,
.complete-btn {
  background-color: var(--success-color);
  color: white;
}

/* 结果样式 */
.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 600px;
}

.result-item {
  background-color: var(--bg-dark);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.result-label {
  color: var(--text-gray);
  margin-bottom: 0.5rem;
}

.result-value {
  font-size: 1.2rem;
  font-weight: 500;
}

.result-value.highlight {
  color: var(--success-color);
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .progress-bar {
    flex-direction: column;
    gap: 2rem;
    padding: 0;
  }

  .progress-bar::before {
    display: none;
  }

  .progress-step {
    flex-direction: row;
    gap: 1rem;
  }

  .step-info {
    text-align: left;
  }

  .results-grid {
    grid-template-columns: 1fr;
  }
}
</style>